<template>
  <div>
    <el-form :model="form" label-width="70px" style="width: 95%">
      <el-form-item label="搜索：">
        <el-input v-model="form.keyword" placeholder="请输入搜索内容" size="small" clearable style="width: 200px"></el-input>
        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
        <el-button type="primary" size="small" style="float: right; left: 100%">换一批<i
            class="el-icon-upload el-icon--right"></i></el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column type="index" width="30"> </el-table-column>
      <el-table-column prop="carID" label="车牌"> </el-table-column>
      <el-table-column prop="time" label="充电时间"> </el-table-column>
      <el-table-column prop="position" label="充电桩"> </el-table-column>
      <el-table-column prop="minRequire" label="最低要求电量"> </el-table-column>
      <!-- <el-table-column prop="buttonType" label="电池类型"> </el-table-column> -->
      <el-table-column prop="operation" label="操作">
        <template>
          <el-button type="success" round>就拍它</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.pageNum"
      :page-sizes="[5, 10, 20, 30]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="tableDataTotal" style="margin-top: 20px">
    </el-pagination>
  </div>
</template>

<script>
import { nodeList } from "@/api/node-manage";
export default {
  name: "ResourceList",
  mounted() {
    const firstQuery = {
      pageNum: 1,
      pageSize: 5,
    };
    this.getNodeList(firstQuery);
  },
  data() {
    return {
      currentPage1: 1,
      tableDataTotal: 0,
      tableData: [
        {
          carID: '京Q58A77',
          time: '11-14 14:00',
          position: '北京丰台宝隆充电站',
          minRequire: 60
          // status: '待竞拍'
        },
        {
          carID: '京Q58A77',
          time: '11-14 14:00',
          position: '北京海淀北京邮电大学充电站',
          minRequire: 40
          // status: '待竞拍'
        },
        {
          carID: '京Q58A77',
          time: '11-14 14:00',
          position: '北京海淀清华大学充电站',
          minRequire: 50
          // status: '待竞拍'
        },
        {
          carID: '京Q58A77',
          time: '11-14 14:00',
          position: '北京海淀北京师范大学充电站',
          minRequire: 70
          // status: '正在竞拍'
        },
        {
          carID: '京Q58A77',
          time: '11-14 14:00',
          position: '北京海淀中央财经大学充电站',
          minRequire: 65
          // status: '待竞拍'
        }
      ],
      form: {
        pageNum: 1,
        pageSize: 5,
        keyword: "",
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getNodeList(this.form);
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getNodeList(this.form);
    },
    getNodeList(query) {
      nodeList(query).then((res) => {
        if (res && res.code === 200) {
          this.tableData = res.data.nodeList;
          this.tableDataTotal = res.data.total;
        } else {
        }
      });
    },
  },
};
</script>

<style>

</style>
